<template>
  <div class="chart-container">
    <div v-if="data.length > 0" ref="chartRef" class="chart-content"></div>
    <chartEmpty v-else />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, computed } from "vue";
import * as echarts from "echarts";
import chartEmpty from "./chartEmpty.vue";

const props = defineProps({
  data: {
    type: Array,
    default: () => [
      { name: "建立信任与关系", value: 50 },
      { name: "需求探寻", value: 30 },
      { name: "产品与方案呈现", value: 10 },
    ],
  },
});

const chartRef = ref(null);
let chart = null;
const averSource = computed(() => {
 const array = props.data || [];

let total = 0;
  for (const arrayElement of array) {
    total += parseFloat(arrayElement.value);
  }
  return (total / array.length).toFixed(2);
});

function getBarColor(value) {
  return parseFloat(value) >= averSource.value ? "#0FAD72" : "#E14F4F";
}

function updateChart() {
  if (!chart) return;

  const option = {
    grid: {
      // top: "10%",
      // left: "3%",
      // right: "3%",
      // bottom: "15%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: props.data.map((item) => {
        return {
          value: item.name,
        };
      }),
      axisLine: {
        show: true,
        lineStyle: {
          color: "#E5E5E5",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#86909C",
        fontSize: 12,
        rotate: 0,
        interval: 0,
        formatter: (value) =>
        {
          /*value 每隔两字自负做一次换行*/
          value = value.replace(/(.{3})/g, '$1\n').trim();
          return value;
        }

      },
    },
    yAxis: {
      type: "value",
      max: 100,
      splitNumber: 5,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: "#E5E5E5",
          type: "dashed",
        },
      },
      axisLabel: {
        color: "#86909C",
        fontSize: 12,
        formatter: "{value}",
      },
    },
    series: [
      {
        type: "bar",
        barWidth: 24,
        data: props.data.map((item) => ({
          value: item.value,
          name: item.name,
          itemStyle: {
            color: getBarColor(item.value),
            borderRadius: [2, 2, 0, 0],
          },
        })),
        label: {
          show: true,
          position: "top",
          fontSize: 12,
          color: "#86909C",
          formatter: "{c}",
        },
      },
    ],
  };

  chart.setOption(option);
}

function initChart() {
  if (!chartRef.value) return;
  chart = echarts.init(chartRef.value);
  updateChart();
}

// 监听数据变化
watch(
  () => props.data,
  () => {
    setTimeout(() => {
      initChart();
      updateChart();
    }, 100);
  },
  { deep: true }
);

// 使用防抖处理 resize
let resizeTimer = null;
const handleResize = () => {
  if (resizeTimer) clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    chart?.resize();
  }, 100);
};

window.addEventListener("resize", handleResize);

onMounted(() => {
  initChart();
});

onUnmounted(() => {
  if (resizeTimer) clearTimeout(resizeTimer);
  chart?.dispose();
  window.removeEventListener("resize", handleResize);
});
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.chart-content {
  width: 100%;
  height: 100%;
  min-height: 240px;
}

@media screen and (max-width: 320px) {
  .chart-container {
    padding: 5px;
  }
}
</style>
